<!DOCTYPE html>
<html>
<meta charset="utf-8"> 
<head>
	<title>印刷机稼动率</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet">

<style type="text/css">
.u-container{
	position: relative;
	width: 100%;
	height: 140px;
	margin: 0 auto;
	margin-top: 40px;
	overflow-x: hidden;
	overflow-y: auto;
}
.u-container .machine:hover{
	background: #29abe2;
}
.u-container p{
	display: none;
}
.machine{
	float: left;
	height: 130px;
	text-align: center;
}
.machine img{
	height: 100%;
}
.undone{
	-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    background: #d0d0d0;
}
.u-datacon{
	position: relative;
	width: 100%;
	height: 840px;
}
.u-leftline{
	position: relative;
	width: 50%;
	height: 540px;
	float: left;
}
.u-chartcon{
	position: relative;
	float: left;
	width: 900px;
	height: 900px;
	margin-top: 40px;
	margin-left: 100px;
	text-align: center;
	overflow: hidden;
}
.u-chart{
	position: relative;
	float: left;
	width: 100%;
	height: 300px;
	margin: 172px 0 0 26px;
	border-left: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}
.u-chartleft{
	position: absolute;
	display: block;
	height: 100%;
	width: 20px;
	left: -22px;
	top: 0;
}
.u-changetime{
	width: 100%;
	height: 30px;
	text-align: left;
}
.u-changetime input.datainp{

	height: 27px;
	width: 170px;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	border: 1px solid #d0d0d0;
	margin-left: 4px;
}

.u-selectClass{
	height: 27px;
	width: 170px;
	border: 1px solid #d0d0d0;
}

.u-start{
	float: left;
	margin-left: 90px;
}
.u-start label,.u-end label{
	display: inline-block;
	text-align: left;
	width: 100px;
}
.u-end{
	float: left;
	margin-left: 6px;
}
.u-auto{
	line-height: 27px;
}
.u-chartbottom{
	position: absolute;
	display: block;
	width: 40px;
	height: 20px;
	line-height: 20px;
	margin: 0;
	left: -30px;
	bottom: -22px;
}
.u-chartbars{
	float: left;
	position: relative;
	height: 100%;
	width: 20px;
	margin-left: 20px;
	-webkit-transform: rotateX(180deg);
}
.u-chartbars .u-mname{
	position: absolute;
	left: -15px;
	top: -16px;
	line-height: 16px;
	width: 50px;
	font-size: 12px;
	-webkit-transform: rotateX(-180deg);
}
.u-product{
	float: left;
	height: 46px;
	width: 100%;
	bottom: 0;
	left: 0;
	background: #f5d73e;
}
.u-break{
	float: left;
	width: 100%;
	height: 20px;
	background: #f44336;
}
.u-error{
	float: left;
	width: 100%;
	height: 20px;
	background: #009fff;
}
.u-chartbars:nth-child(1) .u-product{
	height: 70%;
}
.u-chartbars:nth-child(2) .u-product{
	height: 20%;
}
.u-chartbars:nth-child(3) .u-product{
	height: 50%;
}
.u-chartbars:nth-child(4) .u-product{
	height: 90%;
}
.u-chartbars:nth-child(5) .u-product{
	height: 40%;
}
.u-xm{
	width: 100%;
	margin-top: 20px;
	text-align: left;
}
.u-xm label{
	width: 100px;
	display: inline-block;
}
.u-xm select{
	width: 170px;
	height: 30px;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	border: 1px solid #d0d0d0;
}
.loading{
	background-color: rgba(255,255,255,0.9);
	background-position: center center;
	width: 100%;
	height: 100%;
	background-image: url("image/loading.gif");
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10000;
	background-repeat: no-repeat;
}
</style>
<link rel="stylesheet" type="text/css" href="css/machine.css">
</head>
<body>
<div class="loading"></div>
<div class='u-head'>
   <div class="u-headcon">
	<a href="index.html"><div class="u-mainpage" data-localize="statistics_error2.backindex">回到首页</div></a>
	<h3>稼动率</h3>
	   <div class="changeLang">
		   <p class="u-lang"><span>中文</span><span>English</span></p>
		   <div isopen="true" class="changeLangBtn"></div>
	   </div>
</div>
</div>

<div class="u-datacon">
	<div class="u-chartcon">
		<div class="u-changetime">
			<div class="u-start"><label>开始日期</label><input type="text" class="datainp startDate" readonly/></div>
			<div class="u-end"><label>结束日期</label><input type="text" class="datainp endDate" readonly/></div>
			</select>
		</div>
		<div class="u-xm">
			<label style="margin-left: 90px;">产线</label>
			<select class="u-selectLine">
			</select>
			<label style="margin-left: 9">印刷机选择</label>
			<select class="u-printno">
				<option value ="1">1道</option>
				<option value ="2">2道</option>
				<option value ="3">3道</option>
				<option value ="4">4道</option>
			</select>
			<select class="u-printtype">
				<option value ="擦网版">擦网版</option>
				<option value ="换网版">换网版</option>
				<option value ="补漏浆">补漏浆</option>
				<option value ="换刮刀">换刮刀</option>
				<option value ="换卷纸">换卷纸</option>
				<option value ="转卷纸">转卷纸</option>
				<option value ="调试">调试</option>
			</select>
			<!-- <label style="margin-left: 90px;">PartNo</label>
			<select class="selectpicker2 bla bla bli u-partno" id="u-partno" multiple data-live-search="true">
		  	</select> -->
			<div class="u-btnblue u-confirmbtn">确认</div>
		</div>
		<div id='canvasDiv'></div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.localize.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/language_cookie.js" charset="utf-8"></script>
<script type="text/javascript" src="js/ichart.1.2.1.min.js"></script>
<script type="text/javascript" src="js/jedate.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script type="text/javascript">

var data;
var labela = [];
var chart;
$(function() {
    $(".loading").hide();
    type=$('.u-printtype').val();
    data = [
        {
            name: "印刷机白班总时间",
            value: [null],
            color: '#f5d73e'
        },
        {
            name: "印刷机晚班总时间",
            value: [null],
            color: '#0ca01f'
        },
        {
            name: "印刷机白班"+ type +"时间",
            value: [null],
            color: '#e8d223'
        },
        {
            name: "印刷机晚班"+ type +"时间",
            value: [null],
            color: '#e84923'
        }
    ];

    jeDate({
        dateCell:".startDate",
        format:"YYYY-MM-DD",
        isinitVal:true,
        isTime:true, //isClear:false,
        minDate:"2014-09-19"
    });
    jeDate({
        dateCell:".endDate",
        format:"YYYY-MM-DD",
        isinitVal:true,
        isTime:true, //isClear:false,
        minDate:"2014-09-19"
    });
    var lineurl = getUrl('statistics_getLine'),
		classurl = getUrl('statistics_getClass')
    $.ajax({
        type:'get',
        url: classurl,
        async : false,
        dataType: "json",
        success:function(data){
            var inhtml = "";
            if (data.resultCode == 200 && data.resultMessage == "OK") {
                for (var i = 0,len = data.resultObject.length; i < len; i++) {
                    inhtml += '<option value="'+data.resultObject[i].ID+'">'+data.resultObject[i].CLASSNAME+'</option>';
                }
                $('.u-selectClass').append(inhtml);
            }
        },
        error:function(){
            console.log("selectClass fail");
        }
    });
    $.ajax({  
        type:'get',      
        url: lineurl,
        async : false, 
        dataType: "json", 
        success:function(data){
        	var inhtml = "";
            if (data.resultCode == 200 && data.resultMessage == "OK") {
            	for (var i = 0,len = data.resultObject.length; i < len; i++) {
            		inhtml += '<option value="'+data.resultObject[i].lineId+'">'+data.resultObject[i].lineName+'</option>';
				}
				$('.u-selectLine').append(inhtml);
            }
        },
        error:function(){
            console.log("selectEqByLineId fail");
        }  
    });


	$('.u-confirmbtn').click(function(){
        labela.splice(0,labela.length);
	    var lineid,classid,devices,datestart,dateend,equipment,type,name,url = getUrl('statistics_activation');
        lineid=$(".u-selectLine").val();
		if (!lineid) {
            return false;
		}
		classid=$('.u-selectClass').val();
        datestart=$('.startDate').val();
        labela[0] = datestart;
        dateend=$('.endDate').val();
        var date = new Date(datestart);
        var endDate = new Date(dateend);
        var i=1;
        while (date<endDate)
        {
            date.setDate(date.getDate()+1);
            labela[i]=new Date(date).format("yyyy-MM-dd");
            i++;
        }
        equipment=$('.u-printno').val();
        switch(equipment)
        {
            case "1":
                equipment="2"
                break;
            case "2":
                equipment="5"
                break;
            case "3":
                equipment="8"
                break;
            case "4":
                equipment="11"
                break;
        }
        name=$('.u-printtype').val();
        type=$('.u-printtype').val();
        switch(type)
        {
            case "擦网版":
                type="brushingSenticil"
                break;
            case "换网版":
                type="replacingSenticil"
                break;
            case "补漏浆":
                type="patchMeshLeakage"
                break;
            case "换刮刀":
                type="replacingScraper"
                break;
            case "转卷纸":
                type="turningPaper"
                break;
            case "调试":
                type="debugg"
                break;
            case "换卷纸":
                type="replac_paper"
                break;
        }
        var mes = getData(lineid,datestart,dateend,url,equipment,type,name);
	})
});
function getData(line,datestart,dateend,url,devices,type,name){
    var res = null;
    $.ajax({
        type:'get',
        url: url,
        async : false,
        dataType: "json",
        data:{"line":line,"datestart":datestart,"dateend":dateend,"devices":devices,"type":type},
        success:function(mes){
            $(".loading").hide();
            if (mes.resultCode == 200 && mes.resultMessage == "OK") {mmm
                res = mes;
                var aaa = [0], bbb = [0], ccc = [0], ddd = [0], eee = [0], fff = [0], ggg = [0], hhh = [0], iii = [0],jjj = [0], kkk = [0], lll = [0],  mmm= [0], nnn = [0];
                for (var i = 0, len = mes.resultObject ? mes.resultObject.length : 0; i < len; i++) {
                    aaa[i] = mes.resultObject[i].dayTotalTime;
                    bbb[i] = mes.resultObject[i].dayOffTime;
                    ccc[i] = mes.resultObject[i].nightTotalTime;
                    ddd[i] = mes.resultObject[i].nightOffTime;
                    eee[i] = mes.resultObject[i].dayTimes;
                    fff[i] = mes.resultObject[i].nightTimes;
                }
                    data = [
                        {
                            name: "印刷机白班总时间",
                            value: aaa,
                            color: '#29abe2'
                        },
                        {
                            name: "印刷机晚班总时间",
                            value: ccc,
                            color: '#800080'
                        },
                        {
                            name: "印刷机白班"+ name +"时间",
                            value: bbb,
                            color: '#000000'
                        },
                        {
                            name: "印刷机晚班"+ name +"时间",
                            value: ddd,
                            color: '#FF0000'
                        },
                        {
                            name: "印刷机白班"+ name +"总次数",
                            value: null,
                            color: '#f5d73e'
                        },
                        {
                            name: "印刷机晚班"+ name +"总次数",
                            value: null,
                            color: '#0ca01f'
                        }];
                        var data1=[
                            {
                                name: "印刷机白班"+ name +"总次数",
                                value: eee,
                                color: '#f5d73e'
                            },
                            {
                                name: "印刷机晚班"+ name +"总次数",
                                value: fff,
                                color: '#0ca01f'
                            },];
                chart = new iChart.ColumnMulti2D
                (
                    {
                        render: 'canvasDiv',
                        animation:false,
                        animation_duration:'500',
						column_width:8,
                        data: data1,
                        width: 900,
                        height: 460,
                        shadow: false,
						padding:0,
                        shadow_blur : 2,
						labels:labela,
                        label : {
                            fontsize:11,
                            fontweight:600,
                            color : '#666666'
                        },
                        background_color: '#ffffff',
                        sub_option: {
                            label: false,
                            border : {
                                width : 2,
                                color : '#ffffff'
                            }
                        },
                        coordinate: {
                            width: 640,
                            height: 260,
                            striped_factor: 0.18,
                            gridlinesVisible:false,
                            grid_color: '#4e4e4e',
                            axis: {
                                color: '#252525',
                                width: [0, 0, 2, 2]
                            },
                            scale: [{
                                position: 'left',
                                scale_share:0,
                                label: {
                                    color: '#333333',
                                    font: '微软雅黑',
                                    fontsize: 11,
                                    fontweight: 600
                                },
                                scale_color: '#9f9f9f'
                            }]
                        },
                    });
                var line = new iChart.LineBasic2D
                (
                    {
                        z_index:1000,
                        animation:false,
                        animation_duration:'500',
                        data: data,
                        width: 900,
                        height: 460,
                        shadow: false,
                        label : {
                            fontsize:11,
                            fontweight:600,
                            color : '#4c4f48'
                        },
                        point_space:chart.get('column_width')+chart.get('column_space'),
                        scaleAlign : 'right',
                        sub_option: {
                            smooth: false,
                            hollow: false,
                            hollow_inside: false,
                            label: false,
                            point_size: 8
                        },
                        legend:{
                            enable:true,
                            background_color : null,
                            align : 'center',
                            valign : 'bottom',
                            row:3,
                            column:'max',
                            border : {
                                enable : false
                            }
                        },
                        coordinate: {
                            width: 640,
                            height: 260,
                            striped_factor: 0.18,
                            gridlinesVisible: true,
                            grid_color: '#4e4e4e',
                            crosshair:{enable:true},
                            axis:
                                {
                                    color: '#252525',
                                    width: [0, 0, 2, 2]
                                },
                            scale:
                                [{
                                    position: 'right',
                                    scale_size: 0
                                }
                                ]

                        },

                    });
                chart.plugin(line);
                //$(".loading").hide();
//利用自定义组件构造左侧说明文本
                chart.plugin(new iChart.Custom({
                    drawFn: function() {
                        //计算位置
                        var coo = chart.getCoordinate(),
                            x = coo.get('originx'),
                            y = coo.get('originy'),
                            w = coo.width,
                            h = coo.height;
                        //在左上侧的位置，渲染一个单位的文字
                        chart.target.textAlign('start')
                            .textBaseline('top')
                            .fillText('次数',x-20,y-20,false,'#c52120')
                        //在右上侧的位置，渲染一个单位的文字
                        chart.target.textAlign('top')
                            .fillText('分钟',x+20+coo.width,y-20,false,'#34a1d9')
                    }
                }));
                chart.draw();
                }
        },
        error:function(){
            console.log("fail");
        }
    });
    return res;
}
function eqRender(url){
	var lineId = $(".u-selectLine").val();
	if (!lineId) {
		return false;
	}
	$('#u-eqno').empty();
	$.ajax({  
        type:'get',      
        url: url,
        async : false, 
        dataType: "json",
        data:{"line":lineId},  
        success:function(data){
        	var inhtml = "";
            if (data.resultCode == 200 && data.resultMessage == "OK") {
            	for (var i = 0,len = data.resultObject.length; i < len; i++) {
                    if(getCookie("somoveLanguage")=="zh"){
                        inhtml += '<option value="'+data.resultObject[i].equipmentId+'">'+data.resultObject[i].equipmentName+'</option>';
                    }else if (getCookie("somoveLanguage")=="en"){
                        inhtml += '<option value="'+data.resultObject[i].equipmentId+'">'+data.resultObject[i].equipmentNameEn+'</option>';
                    }


            	}
				$('#u-eqno').append(inhtml);
				//$('#u-eqno').append('</optgroup>');
				//$('#u-eqno').selectpicker('refresh');
            }
        },
        error:function(){
            console.log("selectEqByLineId fail");
        }  
    });
}
</script>

</body>
</html>